<!-- 主要内容的左侧导航中的左侧菜单的二级菜单 -->
<template>
  
  <div class="second-menu" :class="{ rise: open, drop: close }" :style="{'height':FinalHeight(SecondMenuInfo.children.length)}">
    <li
      class="nav-menu-item"
      @click="OpenOrClose"
      :class="id === CurrentOption ? 'is-active' : ''"
    >
      <i :class="SecondMenuInfo.iClass"></i>
      <span class="nav-menu-item-title">{{ SecondMenuInfo.title }}</span>
      <i
        class="fas fa-angle-down"
        style="margin-left: 35px"
        :class="{ open: open, close: close }"
      ></i>
    </li>
    <ul class="drop-list">
    <SecondItem v-for="child in SecondMenuInfo.children" :ChildInfo="child" :key="child.key"></SecondItem>
    </ul>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { LeftNavMenuStore } from "../store/modules/LeftNavMenu";
import SecondItem from './SecondItem.vue'
import {ChildInfo} from './SecondItem.vue'


export interface SecondMenuInfo {
  id: number;
  iClass: string;
  title: string;
  children: Array<ChildInfo>;
}
@Component({
  name: "SecondMenu",
  components:{
    SecondItem
  }
})
export default class extends Vue {
  open = false;
  close = true;
  OpenOrClose(): void {
    this.open = !this.open;
    this.close = !this.close;
  }
  FinalHeight(length:number):string{
    let height=(length+1)*46+'px'
    if(this.open){
      return height
    }else{
      return "46px"
    }
  }
  @Prop() SecondMenuInfo!: SecondMenuInfo;
  get CurrentOption(): number {
    return LeftNavMenuStore.CurrentId;
  }

  id = 0;

  mounted(): void {
    this.id = this.$props.SecondMenuInfo.id;
  }
  changeCurrentId(id: number): void {
    LeftNavMenuStore.ChangeCurrentId(id);
  }
}
</script>

<style>
.second-menu {
  overflow: hidden;
  color: #aaa;
  transition: height 0.5s ease;
}
.open {
  transform: rotate(180deg);
  transition: transform 0.5s ease;
}
.close {
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}
.drop-list {
  position: relative;
  width: 100%;
  left: -5.6px;
  z-index: 1;
}


</style>